<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>储能修正</title>
	<link href="../css/bootstrap.min.css" rel="stylesheet">
	<link href="../css/bootstrap-select.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/bootstrap-datetimepicker.min.css">
	<link href="../css/font-awesome.min.css" rel="stylesheet">
	<link href="../css/JyyCommon.css" rel="stylesheet">
	<link href="../css/JyyTable.css" rel="stylesheet">
	<link href="../css/JyyTree.css" rel="stylesheet">
	<link href="../css/JyyMsgBox.css" rel="stylesheet">
	<link rel="stylesheet" href="../layui/css/layui.css">
	<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
	<script type="text/javascript" src="../js/jquery.form.min.js"></script> 
	<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap-datetimepicker.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap-paginator.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap-select.js"></script>
	<script type="text/javascript" src="../js/jyy_modal.js"></script>
	<script type="text/javascript" src="../js/JyyCommon.js"></script>
	<script type="text/javascript" src="../js/JyyTable.js"></script>
	<script type="text/javascript" src="../js/JyyTree.js"></script>
	<script type="text/javascript" src="../js/JyyMsgBox.js"></script>
	<script type="text/javascript" src="../js/JyyLoading.js"></script>
	<script src="../layui/layui.js"></script>
	<style type="text/css">
		#firstTab th {
			background-color: rgb(64, 144, 231);
		}
		.clickChangeDiv {
			width: 100%;
			height: 24px;
		}
		#energyTab>tbody>tr {
			text-align: center;
			height: 32px;
		}
		#energyTab>tbody>tr>td {
		    font-size: 12px;
		    word-break: keep-all;
		    border-bottom-width: 1px;
		    vertical-align: middle;
		    border: 1px solid #ddd;
		}
		.tdinput {
			width: calc(100% - 10px);
		}
	</style>
</head>
<script type="text/javascript">
	var projectId = getQueryString("projectId")||'88888888888';

	$(function(){
		createTable();
	});
	function createTable() {
		invoke("getEnergyTabData", {projectId:projectId}, function(data){
			var tab = data.list;
			if(tab.length == 0) {
				$("#totalVal").html("暂无对应数据");
			} else {
				var arr = ['徐州储能规划','宿迁储能规划','淮安储能规划','连云港储能规划','盐城储能规划','南通储能规划','泰州储能规划','扬州储能规划','南京储能规划',
						   '镇江储能规划','常州储能规划','苏州储能规划','无锡储能规划'];
				var arren = ['xzRatio','sqRatio','haRatio','lygRatio','ycRatio','ntRatio','tzRatio','yzRatio','njRatio',
					   	   'zjRatio','czRatio','szRatio','wxRatio'];
				var arrra = ['34%','33%','33%','20%','50%','30%','50%','50%','40%','30%','30%','50%','50%'];
				let xsh = 0; // 徐宿淮
				let lyt = 0; // 连盐通
				let yt = 0; // 扬泰
				let nzc = 0; // 宁镇常
				let sx = 0; // 苏锡
				for(let i = 0;i < tab.length;i++) {
					let val = tab[i].unitname;
					let index = arr.indexOf(val);
					if(index <= 2) xsh++;
					if(index > 2 && index <= 5) lyt++;
					if(index > 5 && index <= 7) yt++;
					if(index > 7 && index <= 10) nzc++;
					if(index > 10 && index <= 12) sx++;
					$("#"+arren[index]).html("<div class='clickChangeDiv' unitid='"+tab[i].unitid+"' onclick='toInput(this);' uid='"+arren[index]+"'>"+arrra[index]+"</div>")
				}
				if(xsh > 0) {
					$("#xshRatio").html("<div class='clickChangeDiv' onclick='toInput(this);' uid='xshRatio'>15%</div>")
				} else {
					$("#xshRatio").html("暂无对应数据")
				}
				if(lyt > 0) {
					$("#lytRatio").html("<div class='clickChangeDiv' onclick='toInput(this);' uid='lytRatio'>70%</div>")
				} else {
					$("#lytRatio").html("暂无对应数据")
				}
				if(yt > 0) {
					$("#ytRatio").html("<div class='clickChangeDiv' onclick='toInput(this);' uid='ytRatio'>15%</div>")
				} else {
					$("#ytRatio").html("暂无对应数据")
				}
				if(nzc > 0) {
					$("#nzcRatio").html("<div class='clickChangeDiv' onclick='toInput(this);' uid='nzcRatio'>50%</div>")
				} else {
					$("#nzcRatio").html("暂无对应数据")
				}
				if(sx > 0) {
					$("#sxRatio").html("<div class='clickChangeDiv' onclick='toInput(this);' uid='sxRatio'>50%</div>")
				} else {
					$("#sxRatio").html("暂无对应数据")
				}
				if(xsh > 0 || lyt > 0 || yt > 0) {
					$("#northRatio").html("<div class='clickChangeDiv' onclick='toInput(this);' uid='northRatio'>80%</div>")
				} else {
					$("#northRatio").html("暂无对应数据")
				}
				if(nzc > 0 || sx > 0) {
					$("#southRatio").html("<div class='clickChangeDiv' onclick='toInput(this);' uid='southRatio'>20%</div>")
				} else {
					$("#southRatio").html("暂无对应数据")
				}
				if(xsh > 0 || lyt > 0 || yt > 0 || nzc > 0 || sx > 0) {
					$("#totalVal").html("<div class='clickChangeDiv' onclick='toInput(this);' uid='totalVal'>400</div>")
				}
			}
	    });
	}
	function toInput(e) {
		var uid = e.getAttribute("uid");
		var text = $(e).text();
		if(text == "" && $(e).children().length != 0) {
			text = $(e).children().val();
		}
		var input = "<input class='tdinput' id='input"+uid+"' onblur='toChange(this);'>";
		$(e).html(input);
		$("#input"+uid).keyup(function(){
	        this.value = this.value.replace(/[^\d.]/g,""); //清除"数字"和"."以外的字符
	        this.value = this.value.replace(/^\./g,""); //验证第一个字符是数字
	        this.value = this.value.replace(/\.{2,}/g,"."); //只保留第一个, 清除多余的
	        this.value = this.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");//限制"10.5." 这种情况
		});
		$("#input"+uid).focus();
		if(text.indexOf("%") == -1){
			$("#input"+uid).val(text);
		} else {
			$("#input"+uid).val(text.substring(0,text.length-1));
		}
	}
	function toChange(e) {
		var parent = $(e).parent();
		if($(e).val() != ""){
			parent.html($(e).val()+"%");
			if(parent[0].getAttribute("uid") == "totalVal") parent.html($(e).val());
		} else {
			parent.html("");
		}
	}
	function calculation() {
		let total = $("#totalVal").text();
		if(total == "" || total == 0) {
			JyyMsgBox.alert({ title:"警告", message:"请填写正确的数据",type:"warning"});
			return;
		}
		let north = $("#northRatio").text();// 苏北
		if(north != "" || north != "0%") {
			north = north.substring(0, north.length-1);
			$("#northCalVal").text(Math.round(total*(north/100)));
			let northVal = $("#northCalVal").text();
			let xsh = $("#xshRatio").text();// 苏北-徐宿淮
			if(xsh != "" || xsh != "0%") {
				xsh = xsh.substring(0, xsh.length-1);
				$("#xshCalVal").text(Math.round(northVal*(xsh/100)));
				let xshVal = $("#xshCalVal").text();
				let xz = $("#xzRatio").text();// 徐宿淮-徐州
				if(xz != "" || xz != "0%") {
					xz = xz.substring(0, xz.length-1);
					$("#xzCalVal").text(Math.round(xshVal*(xz/100)));
				}
				let sq = $("#sqRatio").text();// 徐宿淮-宿迁
				if(sq != "" || sq != "0%") {
					sq = sq.substring(0, sq.length-1);
					$("#sqCalVal").text(Math.round(xshVal*(sq/100)));
				}
				let ha = $("#haRatio").text();// 徐宿淮-淮安
				if(ha != "" || ha != "0%") {
					ha = ha.substring(0, ha.length-1);
					$("#haCalVal").text(Math.round(xshVal*(ha/100)));
				}
			}
			let lyt = $("#lytRatio").text();// 苏北-连盐通
			if(lyt != "" || lyt != "0%") {
				lyt = lyt.substring(0, lyt.length-1);
				$("#lytCalVal").text(Math.round(northVal*(lyt/100)));
				let lytVal = $("#lytCalVal").text();
				let lyg = $("#lygRatio").text();// 连盐通-连云港
				if(lyg != "" || lyg != "0%") {
					lyg = lyg.substring(0, lyg.length-1);
					$("#lygCalVal").text(Math.round(lytVal*(lyg/100)));
				}
				let yc = $("#ycRatio").text();// 连盐通-盐城
				if(yc != "" || yc != "0%") {
					yc = yc.substring(0, yc.length-1);
					$("#ycCalVal").text(Math.round(lytVal*(yc/100)));
				}
				let nt = $("#ntRatio").text();// 连盐通-南通
				if(nt != "" || nt != "0%") {
					nt = nt.substring(0, nt.length-1);
					$("#ntCalVal").text(Math.round(lytVal*(nt/100)));
				}
			}
			let yt = $("#ytRatio").text();// 苏北-扬泰
			if(yt != "" || yt != "0%") {
				yt = yt.substring(0, yt.length-1);
				$("#ytCalVal").text(Math.round(northVal*(yt/100)));
				let ytVal = $("#ytCalVal").text();
				let tz = $("#tzRatio").text();// 扬泰-泰州
				if(tz != "" || tz != "0%") {
					tz = tz.substring(0, tz.length-1);
					$("#tzCalVal").text(Math.round(ytVal*(tz/100)));
				}
				let yz = $("#yzRatio").text();// 扬泰-扬州
				if(yz != "" || yz != "0%") {
					yz = yz.substring(0, yz.length-1);
					$("#yzCalVal").text(Math.round(ytVal*(yz/100)));
				}
			}
		}
		let south = $("#southRatio").text();// 苏南
		if(south != "" || south != "0%") {
			south = south.substring(0, south.length-1);
			$("#southCalVal").text(Math.round(total*(south/100)));
			let southVal = $("#southCalVal").text();
			let nzc = $("#nzcRatio").text();// 苏南-宁镇常
			if(nzc != "" || nzc != "0%") {
				nzc = nzc.substring(0, nzc.length-1);
				$("#nzcCalVal").text(Math.round(southVal*(nzc/100)));
				let nzcVal = $("#nzcCalVal").text();
				let nj = $("#njRatio").text();// 宁镇常-南京
				if(nj != "" || nj != "0%") {
					nj = nj.substring(0, nj.length-1);
					$("#njCalVal").text(Math.round(nzcVal*(nj/100)));
				}
				let zj = $("#zjRatio").text();// 宁镇常-镇江
				if(zj != "" || zj != "0%") {
					zj = zj.substring(0, zj.length-1);
					$("#zjCalVal").text(Math.round(nzcVal*(zj/100)));
				}
				let cz = $("#czRatio").text();// 宁镇常-常州
				if(cz != "" || cz != "0%") {
					cz = cz.substring(0, cz.length-1);
					$("#czCalVal").text(Math.round(nzcVal*(cz/100)));
				}
			}
			let sx = $("#sxRatio").text();// 苏南-苏锡
			if(sx != "" || sx != "0%") {
				sx = sx.substring(0, sx.length-1);
				$("#sxCalVal").text(Math.round(southVal*(sx/100)));
				let sxVal = $("#sxCalVal").text();
				let sz = $("#szRatio").text();// 苏锡-苏州
				if(sz != "" || sz != "0%") {
					sz = sz.substring(0, sz.length-1);
					$("#szCalVal").text(Math.round(sxVal*(sz/100)));
				}
				let wx = $("#wxRatio").text();// 苏锡-无锡
				if(wx != "" || wx != "0%") {
					wx = wx.substring(0, wx.length-1);
					$("#wxCalVal").text(Math.round(sxVal*(wx/100)));
				}
			}
		}
	}
	function toUpdate() {
		JyyMsgBox.confirm({ title:"提示", message:"确定要更新数据？",type:"warning"}).on(function (e) {
			if (e) {
				var map = [];
				let arr = $("div[unitid]");
				for(let i = 0;i < arr.length;i++) {
					let unitid = arr[i].getAttribute("unitid");
					let uid = arr[i].getAttribute("uid").replace("Ratio", "CalVal");
					let value = $("#"+uid).text();
					if(value == "" || value == 0) continue;
					map.push({"unitid":unitid, "unitcapamax":value});
				}
				invoke("updateEnergyStorage", {projectid:projectId,map:map}, function(data){
					if(data.flag) {
						JyyMsgBox.alert({ title:"成功", message:"数据更新成功",type:"success"});
					} else {
						JyyMsgBox.alert({ title:"警告", message:"数据更新失败",type:"warning"});
						return false;
					}
			    });
			}
		});
	}
	function getQueryString (name){
		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
		var r = window.location.search.substr(1).match(reg);
		return r ? unescape(r[2]) : null;
	}
	function invoke(url, args, callback){
		var r, op = {
				url: '../g/service/Sample/' + url,
				type:'POST',
				cache:false,
				async:true,
				dataType:'json',
				data:args ? JSON.stringify(args) : null,
				contentType:"application/json"
			};
		if(typeof callback == 'function'){
			op.success = function(data){
				if(data.error)return alert(data.error);
				callback(data);
			}
		} else {
			op.async = false;
			op.success = function(data){
				r = data
			};
		}
		$.ajax(op);
		if(r)if(r.error){
			alert(r.error);
			return null;
		}
		return r;
	};
</script>
<body>
<div style="height: 50px;">
	<div class="col-md-12" style="position: absolute;top: 10px;padding-left: 5px;padding-right: 5px;">
		<button id="calcul"  class="btn btn-info btn-sm" onclick=calculation();><i class="glyphicon"></i>计算</button>
		<button id="gengxin"  class="btn btn-info btn-sm" onclick=toUpdate();><i class="glyphicon"></i>更新</button>
	</div>
</div>
<div style="width: 100%;">
	<table id="energyTab" style="width: calc(100% - 10px);margin: 5px;border: 1px solid #ddd;">
		<tr style="white-space: nowrap;font-weight: bold;background-color: rgb(64, 144, 231);color: #fff;"><td colspan="13">总体新增</td></tr>
		<tr><td colspan="13" id="totalVal"></td></tr>
		<tr><td colspan="8" id="northRatio"></td><td colspan="5" id="southRatio"></td></tr>
		<tr>
			<td colspan="8" style="white-space: nowrap;font-weight: bold;background-color: rgb(244, 176, 132);color: #000;">苏北新增</td>
			<td colspan="5" style="white-space: nowrap;font-weight: bold;background-color: rgb(169, 208, 142);color: #000;">苏南新增</td>
		</tr>
		<tr><td colspan="8" id="northCalVal"></td><td colspan="5" id="southCalVal"></td></tr>
		<tr>
			<td colspan="3" id="xshRatio"></td><td colspan="3" id="lytRatio"></td><td colspan="2" id="ytRatio"></td>
			<td colspan="3" id="nzcRatio"></td><td colspan="2" id="sxRatio"></td>
		</tr>
		<tr>
			<td colspan="3" style="white-space: nowrap;font-weight: bold;background-color: rgb(248, 203, 172);color: #000;">徐宿淮</td>
			<td colspan="3" style="white-space: nowrap;font-weight: bold;background-color: rgb(248, 203, 172);color: #000;">连盐通</td>
			<td colspan="2" style="white-space: nowrap;font-weight: bold;background-color: rgb(248, 203, 172);color: #000;">扬泰</td>
			
			<td colspan="3" style="white-space: nowrap;font-weight: bold;background-color: rgb(198, 224, 180);color: #000;">宁镇常</td>
			<td colspan="2" style="white-space: nowrap;font-weight: bold;background-color: rgb(198, 224, 180);color: #000;">苏锡</td>
		</tr>
		<tr>
			<td colspan="3" id="xshCalVal"></td><td colspan="3" id="lytCalVal"></td><td colspan="2" id="ytCalVal"></td>
			<td colspan="3" id="nzcCalVal"></td><td colspan="2" id="sxCalVal"></td>
		</tr>
		<tr>
			<td id="xzRatio"></td><td id="sqRatio"></td><td id="haRatio"></td><td id="lygRatio"></td><td id="ycRatio"></td>
			<td id="ntRatio"></td><td id="tzRatio"></td><td id="yzRatio"></td><td id="njRatio"></td><td id="zjRatio"></td>
			<td id="czRatio"></td><td id="szRatio"></td><td id="wxRatio"></td>
		</tr>
		<tr>
			<td style="white-space: nowrap;font-weight: bold;">徐州储能规划</td>
			<td style="white-space: nowrap;font-weight: bold;">宿迁储能规划</td>
			<td style="white-space: nowrap;font-weight: bold;">淮安储能规划</td>
			<td style="white-space: nowrap;font-weight: bold;">连云港储能规划</td>
			<td style="white-space: nowrap;font-weight: bold;">盐城储能规划</td>
			<td style="white-space: nowrap;font-weight: bold;">南通储能规划</td>
			<td style="white-space: nowrap;font-weight: bold;">泰州储能规划</td>
			<td style="white-space: nowrap;font-weight: bold;">扬州储能规划</td>
			<td style="white-space: nowrap;font-weight: bold;">南京储能规划</td>
			<td style="white-space: nowrap;font-weight: bold;">镇江储能规划</td>
			<td style="white-space: nowrap;font-weight: bold;">常州储能规划</td>
			<td style="white-space: nowrap;font-weight: bold;">苏州储能规划</td>
			<td style="white-space: nowrap;font-weight: bold;">无锡储能规划</td>
		</tr>
		<tr>
			<td id="xzCalVal"></td><td id="sqCalVal"></td><td id="haCalVal"></td><td id="lygCalVal"></td><td id="ycCalVal"></td>
			<td id="ntCalVal"></td><td id="tzCalVal"></td><td id="yzCalVal"></td><td id="njCalVal"></td><td id="zjCalVal"></td>
			<td id="czCalVal"></td><td id="szCalVal"></td><td id="wxCalVal"></td>
		</tr>
	</table>
</div>
</body>
</html>